<template>
  <div class="setting-container">
    <user-bg></user-bg>
    <div class="down-content">
      提现明细
      <i class="el-icon-arrow-down"></i>
    </div>

    <div class="commission">
      <div class="commission-title space-between">
        <p class="money">当前佣金 <em>5520.12</em>元</p>
        <el-button type="primary" class="submit-money" round @click="isShowMoney = true">申请提现</el-button>
      </div>

      <div class="tab-bar">
        <ul class="space-between">
          <li :class="{'active': isShowIndex == index}" v-for="(item, index) in tabBarList" :key="index" @click="changeTabBar(index)">
            {{item.name}}
          </li>
        </ul>
      </div>

      <div class="tab-content">
        <div class="model" v-if="isShowIndex == 0">
          <ul>
            <li v-for="i in 5" :key="i">
              <router-link to="">
                <div class="first space-between">
                <span class="name">2018-10-12</span>
                <span>待审核111</span>
              </div>
              <div class="second space-between">
                <span class="num">订单号：123456</span>
                <span class="d">申请提现2015元</span>
                <span class="time">2018-12-15</span>
              </div>
              </router-link>
            </li>
          </ul>
        </div>
        <div class="model" v-if="isShowIndex == 1">
          <ul>
            <li v-for="i in 5" :key="i">
              <router-link to="">
                <div class="first space-between">
                <span class="name">2018-10-12</span>
                <span>待审核222</span>
              </div>
              <div class="second space-between">
                <span class="num">订单号：123456</span>
                <span class="d">申请提现2015元</span>
                <span class="time">2018-12-15</span>
              </div>
              </router-link>
            </li>
          </ul>
        </div>
        <div class="model" v-if="isShowIndex == 2">
          <ul>
            <li v-for="i in 5" :key="i">
              <router-link to="">
                <div class="first space-between">
                <span class="name">2018-10-12</span>
                <span>待审核333</span>
              </div>
              <div class="second space-between">
                <span class="num">订单号：123456</span>
                <span class="d">申请提现2015元</span>
                <span class="time">2018-12-15</span>
              </div>
              </router-link>
            </li>
          </ul>
        </div>
        <div class="model" v-if="isShowIndex == 3">
          <ul>
            <li v-for="i in 5" :key="i">
              <router-link to="">
                <div class="first space-between">
                <span class="name">2018-10-12</span>
                <span>待审核444</span>
              </div>
              <div class="second space-between">
                <span class="num">订单号：123456</span>
                <span class="d">申请提现2015元</span>
                <span class="time">2018-12-15</span>
              </div>
              </router-link>
            </li>
          </ul>
        </div>
      </div>

      <div class="cash-withdrawal" v-if="isShowMoney">
        <!--提现-->
        <i class="close el-icon-close " @click="isShowMoney = false"></i>
        <p class="t">提现金额</p>
        <div class="money">
          <i class="icon iconfont iconnewbimoney"></i>
          <input class="money-input" type="number" placeholder="请输入金额" v-model="moneyNum">
        </div>
        <p class="money-num">当前佣金 5520.45</p>
        <div class="submit-btn">
          <el-button type="primary" :disabled="disabledS" round class="submit">提交申请</el-button>
        </div>
      </div>
    </div>

    <bot-contact></bot-contact>
  </div>
</template>

<script>
import userBg from '@/components/userBg';
import botContact from '@/components/botContact';
import { Toast } from 'mint-ui';
import { Cell } from 'mint-ui';
  export default {
    name: "index",
    data() {
      return {
        isShowIndex: 0,
        moneyNum: '',
        isShowMoney: false,
        tabBarList:[
          {
            name: "全部"
          },
          {
            name: "待审核"
          },
          {
            name: "未通过"
          },
          {
            name: "已审核"
          }
        ]
      }
    },
    components: {
      userBg,
      botContact,
      Cell
    },
    computed: {
      disabledS() {
        if(this.moneyNum == '') {
          return true;
        } else{
          return false;
        }
      }
    },
    created() {
      
    },
    mounted() {

    },
    methods: {
      changeTabBar(index) {
        this.isShowIndex = index;
      }
    }
  }
</script>

<style lang="less" scoped>
.promise(@css, @args) {
  @{css}: @args;
  -webkit-@{css}: @args;
  -moz-@{css}: @args;
  -ms-@{css}: @args;
  -o-@{css}: @args;
}
.setting-container{
  padding-bottom: 140/37.5rem;
  .down-content{
    width: 100%;
    height: 90/37.5rem;
    line-height: 90/37.5rem;
    text-align: center;
    color: #666;
    font-size: 32/37.5rem;
    background: #fff;
    border-bottom: 12/37.5rem solid #eee;
  }
  .commission{
    width: 100%;
    padding-bottom: 50/37.5rem;
    position: relative;
    .commission-title{
      padding: 0 40/37.5rem;
      height: 100/37.5rem;
      line-height: 100/37.5rem;
      font-size: 32/37.5rem;
      color: #666;
      border-bottom: 1px solid #ddd;
      .money{
        em{
          font-size: 46/37.5rem;
          color: #FF4D4D;
          font-style: normal;
        }
      }
      .submit-money{
        height: 50/37.5rem;
        line-height: 50/37.5rem;
        padding: 0 10px;
        margin-top: 0.7rem;
      }
    }
    .big-title{
      font-size: 32/37.5rem;
      text-align: center;
      padding: 0.8rem 0;
      color: #666;
    }
    .tab-bar{
      padding: 0 20/37.5rem;
      ul{
        width: 100%;
        height: 80/37.5rem;
        li{
          height: 100%;
          line-height: 80/37.5rem;
          position: relative;
          width: 15%;
          font-size: 26/37.5rem;
          color: #666;
          text-align: center;
          &.active::after{
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            display: block;
            border-bottom: 1px solid #FF4D4D;
          }
        }
      }
    }
    .tab-content{
      margin-top: 0.4rem;
      padding: 0 20/37.5rem;
      ul{
        li{
          padding: 20/37.5rem 0;
          border-bottom: 1px solid #ddd;
          a{
            display: block;
          }
          .first{
            font-size: 24/37.5rem;
            color: #666;
          }
          .second{
            margin-top: 0.5rem;
            font-size: 24/37.5rem;
            color: #666;
            span{
              flex: 1;
            }
            .d{
              text-align: center;
            }
            .time{
              text-align: right;
            }
          }
        }
      }
    }
    .cash-withdrawal{
      position: absolute;
      top: 100/37.5rem;
      left: 0;
      width: 100%;
      background: #fff;
      height: 700/37.5rem;
      border-bottom: 1px solid #ccc;
      z-index: 10;
      padding: 60/37.5rem 0;
      .promise(box-sizing, border-box);
      .promise(box-shadow, 1px 0 5px #999);
      .close{
        position: absolute;
        top: 32/37.5rem;
        right: 32/37.5rem;
        z-index: 10;
        font-size: 34/37.5rem;
      }
      .t{
        font-size: 32/37.5rem;
        color: #666;
        margin: 0 20/37.5rem 30/37.5rem;
      }
      .money{
        font-size: 24/37.5rem;
        color: #666;
        margin: 20/37.5rem;
        border-bottom: 1px solid #ddd;
        padding-bottom: 20/37.5rem;
        .icon{
          color: #FF4D4D;
          font-size: 40/37.5rem;
        }
        .money-input{
          font-size: 28/37.5rem;
          text-indent: 10/37.5rem;
        }
      }
      .money-num{
        font-size: 24/37.5rem;
        color: #666;
        margin: 20/37.5rem;
      }
      .submit-btn{
        padding: 0 20/37.5rem;
        margin-top: 100/37.5rem;
        .submit{
          width: 100%;
          height: 77/37.5rem;
          font-size: 28/37.5rem;
          color: #fff;
          .promise(box-sizing, border-box);
        }
      }
    }
  }
}
</style>
